<template>
  <el-container>
    <el-header>
      <el-button type="primary" icon="el-icon-folder-checked" @click="submitForm">{{ $t("common.save") }}</el-button>
      <el-button type="primary" icon="el-icon-close" @click="cancel">{{ $t("common.cancel") }}</el-button>
    </el-header>
    <el-main>
      <vue-bpmn :initBpmnXML="bpmnXML" ref="modeler"></vue-bpmn>
    </el-main>
  </el-container>
</template>

<script>
import {createNamespacedHelpers} from "vuex";
import {ElMessage} from 'element-plus'
import vueBpmn from "@/components/bpmn/index.vue";
import {getBusinessObject} from "bpmn-js/lib/util/ModelUtil";

const {mapMutations, mapActions} = createNamespacedHelpers("flowDesignStore");

export default {
  name: "FlowModelEditor",
  data() {
    return {
      flowName: "",
      flowListData: [],
      createFlowDialogShow: false,
      modeler: null
    }
  },
  provide() {
    return {
      validate: this.validate,
    }
  },
  computed: {},
  props: ["flowId", "bpmnXML"],
  components: {
    "vue-bpmn": vueBpmn
  },
  methods: {
    ...mapMutations(["updateBpmnModeler"]),
    ...mapActions(["saveBpmnXML", "getBpmnXML", "updateBpmn"]),
    async submitForm() {
      const modeler = this.$refs.modeler.modelerObj.modeler;
      const process = modeler.get("canvas").getRootElement();
      const businessObj = getBusinessObject(process);
      if (!businessObj.name || businessObj.name.trim().length === 0 || !businessObj.key || businessObj.key.trim().length === 0) {
        modeler.setCurrentElement(process);
        await this.$nextTick(() => {
          const processForm = this.$refs.modeler.$refs.propertiesPanel.$refs.propertiesCmp.$refs.cmpRef.$refs.refForm.$refs.form;
          processForm.validate(() => {
            console.log();
          });
        })
      }else{
        try{
          let rst = null;
          const svgXML = await modeler.saveSVG();
          const svgStr = svgXML.svg.match(/<svg.*<\/svg>/)[0];
          var result = await modeler.saveXML({ format: true });
          const params = {
            content: result?.xml,
            flowName: businessObj.name,
            flowType: businessObj.type,
            thumbnail: svgStr,
            suffix: "bpmn",
            flowVariableList: businessObj.var ? businessObj.var.split(",").map(item => ({name: item})) : [],
            fileName: businessObj.name + ".bpmn",
            formId: businessObj.formId
          }
          if(this.flowId){
            params.id = this.flowId;
            rst = await this.updateBpmn(params)
          }else{
            params.flowKey = businessObj.key;
            rst = await this.saveBpmnXML(params)
          }
          console.log(rst,'rstrst');
          if(rst.status){
            ElMessage.success({
              message: this.$t("message.success", [this.flowId ? this.$t("common.update") : this.$t("common.add")]),
              type: 'success'
            });
            this.toggleList({flag:true});
          }else{
            ElMessage.error(this.$t("message.error", [rst.message]));
          }
        }catch(e){
          console.log(e);
        }
      }
    },
    validate(form){
      form.validate(() => {
        console.log();
      });
    },
    cancel() {
      this.toggleList({flag:true});
    },
  },
  inject: ["toggleList"],
}
</script>

<style scoped lang="scss">
.el-container {
  height: 100%;
  @include flex-style(flex, auto, column);

  .el-header {
    height: auto !important;
    text-align: right;
  }

  .el-main {
    @include flex-style(flex, auto, row);

    #flow {
      flex: auto;
    }

    #js-properties-panel {
      flex: 0 0 300px;
    }
  }
}
</style>
